<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="我发布的美食" style="background-color: #FFD85F;" class="headera">
            <template #left>
                <van-icon name="arrow-left" size="18" @click="$router.back()" />
            </template>
        </van-nav-bar>

        <!-- 美食列表 -->
        <div style="background-color: #FFF7E1; min-height: 100vh; padding: 10px;">
            <van-swipe-cell v-for="(dish, index) in dishes" :key="dish.id" :right-width="65" class="dish-item">
                <!-- 删除按钮 -->
                <template #right>

                    <van-button square type="danger" style="height: 100%;" @click="deleteDish(dish.id)">
                        删除
                    </van-button>
                </template>

                <!-- 美食卡片 -->
                <div class="dish-card" @click="detail(dish.id)">
                    <van-image :src="dish.imageUrl" width="80" height="80" round style="margin-right: 10px;" />
                    <div class="dish-info">
                        <h3>{{ dish.recipeName }}</h3>
                        <p>{{ dish.description }}</p>
                        <p class="dish-meta">
                            <strong>卡路里:</strong> {{ dish.calories }} kcal
                        </p>
                    </div>

                </div>
                <van-button square type="primary" style="height: 100%;" @click="editDish(dish)">
                    修改
                </van-button>
            </van-swipe-cell>

            <!-- 空列表提示 -->
            <div v-if="dishes.length === 0" class="empty-message">
                <p>您还没有发布任何美食~</p>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { NavBar, Image, Button, SwipeCell } from "vant";

export default {
    components: {
        [NavBar.name]: NavBar,
        [Image.name]: Image,
        [Button.name]: Button,
        [SwipeCell.name]: SwipeCell,
    },
    data() {
        return {
            dishes: [

            ],
        };
    },
    methods: {
        deleteDish(id) {

            axios({
                url: "http://localhost:8081/wx/recipes/delete",
                params: {
                    id,
                    userId: localStorage.getItem("userId")
                }
            }).then(res => {
                this.$toast.success("美食已删除");
                axios({
                    url: "http://localhost:8081/wx/recipes/userrecipes?userId=" + localStorage.getItem("userId")
                }).then(res => {

                    this.dishes = res.data.data
                })
            })

        },
        detail(id) {
            this.$router.push({ name: 'FoodDetails', params: { id: id } });
        },
        editDish(dish) {
            console.log(dish)
            this.$router.push({
                name: 'addfood', // 这里需要确保路由是正确的
                params: { id: dish.id } // 传递食谱ID
            });
        }
    },
    created() {
        axios({
            url: "http://localhost:8081/wx/recipes/userrecipes?userId=" + localStorage.getItem("userId")
        }).then(res => {

            this.dishes = res.data.data
        })
    }
};
</script>

<style scoped>
.headera {
    .van-nav-bar__title {
        color: #fff;
        font-weight: bold;
        font-size: 1.2em;
    }
}

.dish-item {
    margin-bottom: 10px;
    border-radius: 8px;
    background: #fff7e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.dish-card {
    display: flex;
    align-items: center;
    padding: 10px;
}

.dish-info {
    flex: 1;
}

.dish-info h3 {
    margin: 0;
    font-size: 1em;
    color: #333;
}

.dish-info p {
    margin: 4px 0;
    font-size: 0.85em;
    color: #555;
}

.dish-meta {
    font-size: 0.8em;
    color: #999;
}

.empty-message {
    text-align: center;
    color: #555;
    font-size: 0.9em;
    margin-top: 20px;
}
</style>